<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>共享VIP管理平台</title>
    <!-- 引入Element UI -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/display.css">
    <script src="https://unpkg.com/vue@2.6.14/dist/vue.js"></script>
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <style>
        body {
            margin: 0;
            padding: 0;
            font-family: "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB", Arial, sans-serif;
        }
    </style>
</head>
<body>
<div id="app">
    <el-container style="height: 100vh;">
        <el-header style="background-color: rgb(52 56 60);line-height: 100px;">
            <div style="color: #fff; font-size: 26px; margin: -20px 40%; height: 60px;">
                共享VIP管理平台
            </div>
        </el-header>
        <el-container>
            <el-aside width="220px" style="background-color: #545c64;">
                <el-menu :default-active="active_index" background-color="#545c64" text-color="#fff"
                         active-text-color="#ffd04b"
                         style="border-right: none;">
                    <el-menu-item index="1" @click="phone_num_manage_search">
                        <!--                        <i class="el-icon-document"></i>-->
                        <span>手机号管理</span>
                    </el-menu-item>
                    <el-menu-item index="2" @click="app_vip_manage_search">
                        <span>APP会员管理</span>
                    </el-menu-item>
                    <el-menu-item index="3" @click="shop_vip_manage_search">
                        <span>店铺会员管理</span>
                    </el-menu-item>
                    <el-menu-item index="4" @click="app_manage_search">
                        <span>APP管理</span>
                    </el-menu-item>
                    <el-menu-item index="5" @click="redeem_code_manage_search">
                        <span>兑换码管理</span>
                    </el-menu-item>
                    <el-menu-item index="6" @click="loadUsers">
                        <span>用户管理</span>
                    </el-menu-item>
                    <el-menu-item index="7" @click="logout">
                        <span>登出</span>
                    </el-menu-item>
                </el-menu>
            </el-aside>

            <el-main style="padding: 20px; background-color: #f0f2f5;">
                <div v-if="activeTab === 'phone_num_manage'">
                    <!-- 搜索和新增区域 -->
                    <div>
                        <el-form :inline="true" :model="phone_num_manage_param" class="demo-form-inline">
                            <el-form-item label="手机号">
                                <el-input v-model="phone_num_manage_param.phone_num" placeholder="手机号"></el-input>
                            </el-form-item>
                            <el-form-item label="运营商">
                                <el-select v-model="phone_num_manage_param.carrier" placeholder="运营商">
                                    <el-option label="" value=""></el-option>
                                    <el-option label="移动" value="china_mobile"></el-option>
                                    <el-option label="联通" value="china_unicom"></el-option>
                                    <el-option label="电信" value="china_telecom"></el-option>
                                </el-select>
                            </el-form-item>
                            <el-form-item label="生成会员情况">
                                <el-select v-model="phone_num_manage_param.phone_has_vip" placeholder="">
                                    <el-option label="" value=""></el-option>
                                    <el-option label="已生成会员" value="1"></el-option>
                                    <el-option label="未生成会员" value="0"></el-option>
                                </el-select>
                            </el-form-item>
                            <el-form-item>
                                <el-button type="primary" @click="phone_num_manage_search">查询</el-button>
                            </el-form-item>
                        </el-form>
                    </div>
                    <div style="margin-bottom: 10px;">
                        <el-row :gutter="10">
                            <el-col :span="2">
                                <el-button type="primary" size="small" @click="handle_batch_open_dialog">批量兑换</el-button>
                            </el-col>
                            <el-col :span="2">
                                <el-button type="primary" size="small" @click="phone_template_download">模版下载</el-button>
                            </el-col>
                            <el-col :span="2">
                                <el-upload
                                        :show-file-list="false"
                                        class="upload-demo"
                                        action=""
                                        :limit="1"
                                        accept=".xlsx"
                                        :http-request="phone_upload">
                                    <el-button size="small" type="primary">上传文件</el-button>
                                </el-upload>
                            </el-col>
                        </el-row>
                    </div>
                    <div>
                        <el-table ref="multipleTable" :data="phones" tooltip-effect="dark" style="width: 100%"
                                  @selection-change="handleSelectionChange">
                            <el-table-column type="selection" width="55"></el-table-column>
                            <el-table-column type="index" width="80" label="序号"></el-table-column>
                            <el-table-column prop="country_code" label="国际区号"></el-table-column>
                            <el-table-column prop="phone_num" label="手机号"></el-table-column>
                            <el-table-column prop="phone_code_url" label="获取验证码url"></el-table-column>
                            <el-table-column prop="app_type" label="app类型">
                                <template slot-scope="scope">{{ app_map[scope.row.app_type] }}</template>
                            </el-table-column>
                            <el-table-column prop="carrier" label="运营商"></el-table-column>
                            <el-table-column prop="has_vip" label="是否已生成会员">
                                <template slot-scope="scope">{{ has_vip_map[scope.row.has_vip] }}</template>
                            </el-table-column>
                            <el-table-column label="操作" width="400">
                                <template slot-scope="scope">
                                    <el-button size="mini" @click="handle_open_dialog(scope.row)">兑换会员</el-button>
                                    <el-button size="mini" @click="go_app_vip(scope.row.phone_num)">会员详情</el-button>
                                </template>
                            </el-table-column>
                        </el-table>
                        <el-pagination
                                @size-change="phone_table_size_change"
                                @current-change="phone_table_current_change"
                                :current-page="phone_table_config.page_num"
                                :page-sizes="[20, 50, 100]"
                                :page-size="phone_table_config.page_size"
                                layout="total, sizes, prev, pager, next, jumper"
                                :total="phone_table_config.total"></el-pagination>
                    </div>
                </div>

                <div v-if="activeTab === 'app_vip_manage'">
                    <!-- 搜索和新增区域 -->
                    <div>
                        <el-form :inline="true" :model="app_vip_manage_param" class="demo-form-inline">
                            <el-form-item label="手机号">
                                <el-input v-model="app_vip_manage_param.phone_num" placeholder="手机号"></el-input>
                            </el-form-item>
                            <el-form-item label="app类型">
                                <el-select v-model="app_vip_manage_param.app_type" placeholder="app类型">
                                    <el-option label="" value=""></el-option>
                                    <el-option label="腾讯视频" value="txsp"></el-option>
                                    <el-option label="爱奇艺" value="iqy"></el-option>
                                    <el-option label="芒果tv" value="mgtv"></el-option>
                                    <el-option label="WPS" value="wps"></el-option>
                                    <el-option label="优酷视频" value="yksp"></el-option>
                                </el-select>
                            </el-form-item>
                            <el-form-item label="会员类型">
                                <el-select v-model="app_vip_manage_param.vip_type" placeholder="app类型">
                                    <el-option label="" value=""></el-option>
                                    <el-option label="普通会员" value="vip"></el-option>
                                    <el-option label="超级会员" value="svip"></el-option>
                                </el-select>
                            </el-form-item>
                            <el-form-item>
                                <el-button type="primary" @click="app_vip_manage_search">查询</el-button>
                            </el-form-item>
                        </el-form>
                    </div>
                    <div>
                        <el-table ref="multipleTable" :data="phones" tooltip-effect="dark" style="width: 100%"
                                  @selection-change="handleSelectionChange">
                            <el-table-column type="selection" width="55"></el-table-column>
                            <el-table-column type="index" width="80" label="序号"></el-table-column>
                            <el-table-column prop="app_vip_id" label="APP会员ID"></el-table-column>
                            <el-table-column prop="app_type" label="APP类型">
                                <template slot-scope="scope">{{ app_map[scope.row.app_type] }}</template>
                            </el-table-column>
                            <el-table-column prop="country_code" label="国际区号"></el-table-column>
                            <el-table-column prop="phone_num" label="对应手机号"></el-table-column>
                            <el-table-column prop="url_addr" label="原始url地址">
                            </el-table-column>
                            <el-table-column prop="url_create_at" label="url生成日期"></el-table-column>
                            <el-table-column prop="vip_type" label="会员类型"></el-table-column>
                            <el-table-column prop="vip_cycle" label="会员时长">
                                <template slot-scope="scope">{{ cycle_map[scope.row.vip_cycle] }}</template>
                            </el-table-column>
                            <el-table-column prop="vip_share_num" label="店铺会员分享数量"></el-table-column>
                            <el-table-column prop="vip_share_remain" label="店铺会员剩余数量"></el-table-column>
                            <el-table-column prop="vip_exchange_code" label="APP会员对应兑换码"></el-table-column>
                            <el-table-column label="操作" width="400">
                                <template slot-scope="scope">
                                    <el-button size="mini" @click="get_url(scope.row)">生成链接</el-button>
                                    </el-button>
                                </template>
                            </el-table-column>
                        </el-table>
                        <el-pagination
                                @size-change="app_vip_table_size_change"
                                @current-change="app_vip_table_current_change"
                                :current-page="phone_table_config.page_num"
                                :page-sizes="[20, 50, 100]"
                                :page-size="phone_table_config.page_size"
                                layout="total, sizes, prev, pager, next, jumper"
                                :total="phone_table_config.total"></el-pagination>
                    </div>
                </div>

                <div v-if="activeTab === 'app_manage'">
                    <div>
                        <div style="margin-bottom: 10px;">
                            <el-button type="primary" size="mini" @click="app_manage_add">新增</el-button>
                        </div>
                        <el-table ref="multipleTable" :data="phones" tooltip-effect="dark" style="width: 100%"
                                  @selection-change="handleSelectionChange">
                            <el-table-column type="selection" width="55"></el-table-column>
                            <el-table-column type="index" width="80" label="序号"></el-table-column>
                            <el-table-column prop="app_name" label="APP名称">
                                <template slot-scope="scope">{{ app_map[scope.row.app_name] }}</template>
                            </el-table-column>
                            <el-table-column prop="vip_type" label="会员类型"></el-table-column>
                            <el-table-column prop="vip_cycle" label="会员类型-周期">
                                <template slot-scope="scope">{{ cycle_map[scope.row.vip_cycle] }}</template>
                            </el-table-column>
                            <el-table-column prop="vip_share_total" label="会员可分享数量"></el-table-column>
                            <el-table-column label="操作" width="400">
                                <template slot-scope="scope">
                                    <el-button size="mini" @click="app_manage_dialog(scope.row)">修改</el-button>
                                    <el-button size="mini" type="danger" @click="app_del_dialog_show(scope.row.id);">删除</el-button>
                                </template>
                            </el-table-column>
                        </el-table>
                        <el-pagination
                                @size-change="app_table_size_change"
                                @current-change="app_table_current_change"
                                :current-page="phone_table_config.page_num"
                                :page-sizes="[20, 50, 100]"
                                :page-size="phone_table_config.page_size"
                                layout="total, sizes, prev, pager, next, jumper"
                                :total="phone_table_config.total"></el-pagination>
                    </div>
                </div>

                <div v-if="activeTab === 'redeem_code_manage'">
                    <div style="margin-bottom: 10px;">
                        <el-row :gutter="10">
                            <el-col :span="2">
                                <el-button type="primary" size="small" @click="redeem_template_download">模版下载</el-button>
                            </el-col>
                            <el-col :span="2">
                                <el-upload
                                        :show-file-list="false"
                                        class="upload-demo"
                                        action=""
                                        :limit="1"
                                        accept=".xlsx"
                                        :http-request="redeem_code_upload">
                                    <el-button size="small" type="primary">上传文件</el-button>
                                </el-upload>
                            </el-col>
                            <el-col :span="2">
                                <el-button type="primary" size="small" @click="redeem_manage_add">新增</el-button>
                            </el-col>
                        </el-row>
                    </div>
                    <div>
                        <el-table ref="multipleTable" :data="phones" tooltip-effect="dark" style="width: 100%"
                                  @selection-change="handleSelectionChange">
                            <el-table-column type="selection" width="55"></el-table-column>
                            <el-table-column type="index" width="80" label="序号"></el-table-column>
                            <el-table-column prop="redeem_code" label="兑换码"></el-table-column>
                            <el-table-column prop="app_name" label="APP名称">
                                <template slot-scope="scope">{{ app_map[scope.row.app_name] }}</template>
                            </el-table-column>
                            <el-table-column prop="vip_type" label="会员类型"></el-table-column>
                            <el-table-column prop="vip_cycle" label="周期">
                                <template slot-scope="scope">{{ cycle_map[scope.row.vip_cycle] }}</template>
                            </el-table-column>
                            <el-table-column prop="use_status" label="是否已用">
                                <template slot-scope="scope">{{ use_map[scope.row.use_status] }}</template>
                            </el-table-column>
                            <el-table-column label="操作" width="400">
                                <template slot-scope="scope">
                                    <el-button size="mini" @click="handle_redeem_manage_dialog_show(scope.row)">修改</el-button>
                                    <el-button size="mini" type="danger" @click="redeem_del_dialog_show(scope.row.id)">删除</el-button>
                                </template>
                            </el-table-column>
                        </el-table>
                        <el-pagination
                                @size-change="redeem_table_size_change"
                                @current-change="redeem_table_current_change"
                                :current-page="phone_table_config.page_num"
                                :page-sizes="[20, 50, 100]"
                                :page-size="phone_table_config.page_size"
                                layout="total, sizes, prev, pager, next, jumper"
                                :total="phone_table_config.total"></el-pagination>
                    </div>
                </div>

                <div v-if="activeTab === 'shop_vip_manage'">
                    <div>

                        <div style="margin-bottom: 10px;">
                            <el-button type="primary" size="mini" @click="shop_vip_export">导出</el-button>
                        </div>

                        <el-table ref="multipleTable" :data="phones" tooltip-effect="dark" style="width: 100%"
                                  @selection-change="handleSelectionChange">
                            <el-table-column type="selection" width="55"></el-table-column>
                            <el-table-column type="index" width="80" label="序号"></el-table-column>
                            <el-table-column prop="app_vip_id" label="APP会员ID"></el-table-column>
                            <el-table-column prop="app_type" label="APP名称">
                                <template slot-scope="scope">{{ app_map[scope.row.app_type] }}</template>
                            </el-table-column>
                            <el-table-column prop="vip_type" label="会员类型"></el-table-column>
                            <el-table-column prop="url_addr" label="用户url地址">
                                <template slot-scope="scope"> {{scope.row.base_path}}{{scope.row.url_addr}} </template>
                            </el-table-column>
                            <el-table-column prop="shop_vip_id" label="店铺会员ID"></el-table-column>
                            <el-table-column prop="vip_create_at" label="会员生成日期"></el-table-column>
                            <el-table-column prop="url_valid" label="是否失效链接">
                                <template slot-scope="scope">{{ invalid_map[scope.row.url_valid] }}</template>
                            </el-table-column>
                            <el-table-column label="操作" width="400">
                                <template slot-scope="scope">
                                    <el-button size="mini" @click="del_url(scope.row)">删除链接</el-button>
                                    <el-button size="mini" @click="invalid_url(scope.row)">失效链接</el-button>
                                </template>
                            </el-table-column>
                        </el-table>
                        <el-pagination
                                @size-change="shop_vip_table_size_change"
                                @current-change="shop_vip_table_current_change"
                                :current-page="phone_table_config.page_num"
                                :page-sizes="[20, 50, 100]"
                                :page-size="phone_table_config.page_size"
                                layout="total, sizes, prev, pager, next, jumper"
                                :total="phone_table_config.total"></el-pagination>
                    </div>
                </div>
                <!-- 用户管理 -->
                <div v-if="activeTab === 'users'">
                    <el-table :data="users" style="width: 100%">
                        <el-table-column prop="username" label="用户名"></el-table-column>
                        <el-table-column prop="role" label="角色"></el-table-column>
                        <el-table-column label="状态">
                            <template slot-scope="scope">
                                <el-tag :type="scope.row.status ? 'success' : 'danger'">
                                    {{ scope.row.status ? '正常' : '封禁' }}
                                </el-tag>
                            </template>
                        </el-table-column>
                        <el-table-column label="操作" width="250">
                            <template slot-scope="scope">
                                <el-button size="mini" @click="editItem(scope.row, 'user')">编辑</el-button>
                                <el-button size="mini" type="danger" @click="deleteItem(scope.row.id, 'user')">删除
                                </el-button>
                                <el-button size="mini" v-if="scope.row.status"
                                           @click="toggleStatus(scope.row.id, 'user', false)">封禁
                                </el-button>
                                <el-button size="mini" v-else @click="toggleStatus(scope.row.id, 'user', true)">解封
                                </el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                </div>

                <el-dialog
                        title="选择会员类型"
                        :visible.sync="dialogVisible"
                        width="30%"
                        :close="handle_dialog_close"
                >
                    <el-form :inline="true" :model="exchange_vip_param" class="demo-form-inline">
                        <el-form-item label="会员类型">
                            <el-select v-model="exchange_vip_param.vip_type" placeholder="">
                                <el-option label="vip" value="vip"></el-option>
                                <el-option label="svip" value="svip"></el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="开通周期">
                            <el-select v-model="exchange_vip_param.vip_cycle" placeholder="">
                                <el-option label="1天" value="day_1"></el-option>
                                <el-option label="1个月" value="month_1"></el-option>
                                <el-option label="1季度" value="month_3"></el-option>
                                <el-option label="半年" value="month_6"></el-option>
                                <el-option label="一年" value="month_12"></el-option>
                            </el-select>
                        </el-form-item>
                    </el-form>
                    <el-button @click="handle_dialog_close">取 消</el-button>
                    <el-button type="primary" @click="handle_dialog_confirm">确 定</el-button>
                    </span>
                </el-dialog>

                <el-dialog
                    title = 'APP详情'
                    :visible.sync="app_manage_dialog_visible"
                    width="30%"
                    :close="handle_app_manage_dialog_close"
                >
                    <el-form :inline="true" :model="app_manage_entity" class="demo-form-inline">
                        <el-form-item label="APP名称">
                            <el-select v-model="app_manage_entity.app_name">
                                <el-option label="爱奇艺" value="iqy"></el-option>
                                <el-option label="芒果tv" value="mgtv"></el-option>
                                <el-option label="WPS" value="wps"></el-option>
                                <el-option label="腾讯视频" value="txsp"></el-option>
                                <el-option label="优酷视频" value="yksp"></el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="会员类型">
                            <el-select v-model="app_manage_entity.vip_type">
                                <el-option label="vip" value="vip"></el-option>
                                <el-option label="svip" value="svip"></el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="会员周期">
                            <el-select v-model="app_manage_entity.vip_cycle">
                                <el-option label="1天" value="day_1"></el-option>
                                <el-option label="1个月" value="month_1"></el-option>
                                <el-option label="1季度" value="month_3"></el-option>
                                <el-option label="半年" value="month_6"></el-option>
                                <el-option label="一年" value="month_12"></el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="会员可分享数量">
                            <el-input v-model="app_manage_entity.vip_share_total"></el-input>
                        </el-form-item>
                    </el-form>
                    <el-button @click="handle_app_manage_dialog_close">取 消</el-button>
                    <el-button type="primary" @click="handle_app_dialog_confirm">确 定</el-button>
                </el-dialog>

                <el-dialog
                  title="提示"
                  :visible.sync="appDelDialogVisible"
                  width="30%"
                  :before-close="appDelHandleClose">
                  <span>确定要删除吗</span>
                  <span slot="footer" class="dialog-footer">
                    <el-button @click="appDelDialogVisible = false">取 消</el-button>
                    <el-button type="primary" @click="app_del()">确 定</el-button>
                  </span>
                </el-dialog>

                <el-dialog
                    title = '兑换码详情'
                    :visible.sync="redeem_manage_dialog_visible"
                    width="30%"
                    :close="handle_redeem_manage_dialog_close"
                >
                    <el-form :inline="true" :model="redeem_manage_entity" class="demo-form-inline">
                        <el-form-item label="兑换码">
                            <el-input v-model="redeem_manage_entity.redeem_code"></el-input>
                        </el-form-item>
                        <el-form-item label="APP名称">
                            <el-select v-model="redeem_manage_entity.app_name">
                                <el-option label="爱奇艺" value="iqy"></el-option>
                                <el-option label="芒果tv" value="mgtv"></el-option>
                                <el-option label="WPS" value="wps"></el-option>
                                <el-option label="腾讯视频" value="tsxp"></el-option>
                                <el-option label="优酷视频" value="yksp"></el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="会员类型">
                            <el-select v-model="redeem_manage_entity.vip_type">
                                <el-option label="vip" value="vip"></el-option>
                                <el-option label="svip" value="svip"></el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="会员周期">
                            <el-select v-model="redeem_manage_entity.vip_cycle">
                                <el-option label="1天" value="day_1"></el-option>
                                <el-option label="1个月" value="month_1"></el-option>
                                <el-option label="1季度" value="month_3"></el-option>
                                <el-option label="半年" value="month_6"></el-option>
                                <el-option label="一年" value="month_12"></el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="是否已用">
                            <el-select v-model="redeem_manage_entity.use_status">
                                <el-option label="是" value="1"></el-option>
                                <el-option label="否" value="0"></el-option>
                            </el-select>
                        </el-form-item>
                    </el-form>
                    <el-button @click="handle_redeem_manage_dialog_close">取 消</el-button>
                    <el-button type="primary" @click="handle_redeem_dialog_confirm">确 定</el-button>
                </el-dialog>

                <el-dialog
                  title="提示"
                  :visible.sync="redeemDelDialogVisible"
                  width="30%"
                  :before-close="redeemDelHandleClose">
                  <span>确定要删除吗</span>
                  <span slot="footer" class="dialog-footer">
                    <el-button @click="redeemDelDialogVisible = false">取 消</el-button>
                    <el-button type="primary" @click="redeem_del()">确 定</el-button>
                  </span>
                </el-dialog>
            </el-main>
        </el-container>

    </el-container>
</div>

<script>
    new Vue({
        el: '#app',
        data() {
            return {
                use_map: {
                    "0": "否",
                    "1": "是"
                },
                invalid_map: {
                    "0": "是",
                    "1": "否"
                },
                redeemDelDialogVisible: false,
                cycle_map: {
                    "day_1": "1天",
                    "month_1": "1个月",
                    "month_3": "1季度",
                    "month_6": "半年",
                    "month_12": "1年",
                },
                redeem_manage_entity: {
                    id: "",
                    redeem_code: "",
                    app_name: "",
                    vip_type: "",
                    vip_cycle: "",
                    use_stauts: ""
                },
                redeem_manage_dialog_visible: false,
                app_manage_entity: {
                    id: "",
                    app_name: "",
                    vip_type: "",
                    vip_cycle: "",
                    vip_share_total: ""
                },
                appDelDialogVisible: false,
                app_manage_dialog_visible: false,
                dialogVisible: false,
                batchDialogVisible: false,
                phone_table_config: {
                    total: 1000,
                    page_num: 1,
                    page_size: 20
                },
                carrier_map: {
                    "china_mobile": "移动",
                    "china_unicom": "联通",
                    "china_telecom": "电信"
                },
                has_vip_map: {
                    "1": "已开通",
                    "0": "未开通"
                },
                active_index: '1',
                activeTab: 'phone_num_manage',
                multipleSelection: [],
                phone_num_manage_param: {
                    phone_num: '',
                    carrier: '',
                    phone_has_vip: ''
                },
                app_vip_manage_param: {
                    phone_num: '',
                    app_type: '',
                    vip_type: ''
                },
                searchQuery: '',
                phones: [],
                filteredUsers: [],
                users: [],
                posts: [],
                comments: [],
                username: '管理员',
                token: localStorage.getItem('token') || '',
                isAdmin: true,

                // 新增表单数据
                addForm: {
                    type: 'user',
                    username: '',
                    email: '',
                    password: '',
                    title: '',
                    content: '',
                    postId: ''
                },
                addDialogVisible: false,
                app_map: {
                    "txsp": "腾讯视频",
                    "iqy": "爱奇艺",
                    "mgtv": "芒果tv",
                    "wps": "WPS",
                    "yksp": "优酷视频",
                },
                exchange_vip_param: {
                    country_code: "",
                    phone_num: "",
                    phone_code_url: "",
                    app_type: "",
                    vip_type: "",
                    vip_cycle: "",
                    has_vip: ""
                }
            }
        },
        created() {
            if (!this.token) {
                this.$message.error('请先登录');
                this.logout();
                return;
            }

            this.fetchUserInfo().then(() => {
                this.phone_num_manage_search();
            }).catch(() => {
                this.logout();
            });
        },

        methods: {
            redeem_del() {
                this.redeemDelDialogVisible = false;
                axios.post('/redeem_manage/del', this.redeem_manage_entity,
                    {headers: {'Authorization': `Bearer ${this.token}`}})
                    .then(res=>{
                        this.$message({
                            type:'warning',
                            message: res.data.msg
                        })
                        this.redeem_code_manage_search()
                    })
            },
            redeem_del_dialog_show(id) {
                this.redeem_manage_entity.id = id;
                this.redeemDelDialogVisible = true;
            },
            redeemDelHandleClose() {
                this.redeemDelDialogVisible = false;
            },
            handle_redeem_manage_dialog_close() {
                this.redeem_manage_dialog_visible = false;
            },
            handle_redeem_manage_dialog_show(data) {
                this.redeem_manage_entity = data;
                this.redeem_manage_dialog_visible = true;
            },
            redeem_manage_add() {
                this.redeem_manage_entity = {
                    id: "",
                    redeem_code: "",
                    app_name: "",
                    vip_type: "",
                    vip_cycle: "",
                    use_stauts: ""
                }
                this.redeem_manage_dialog_visible = true;
            },
            handle_redeem_dialog_confirm() {
                this.redeem_manage_modify(this.redeem_manage_entity)
                this.redeem_manage_dialog_visible = false;
            },
            redeem_manage_modify(data) {
                axios.post('/redeem_manage/', data,
                    {headers: {'Authorization': `Bearer ${this.token}`}}
                ).then(res => {
                    this.$message({
                        type:'warning',
                        message: res.data.msg
                    })
                    this.redeem_code_manage_search()
                })
            },
            app_del_dialog_show(id) {
                this.appDelDialogVisible = true;
                this.app_manage_entity.id = id;
            },
            appDelHandleClose() {
                this.appDelDialogVisible = false;
            },
            app_del() {
                this.appDelDialogVisible = false;
                axios.post('/app_manage/del', this.app_manage_entity,
                    {headers: {'Authorization': `Bearer ${this.token}`}})
                    .then(res=>{
                        this.$message({
                            type:'warning',
                            message: res.data.msg
                        })
                        this.app_manage_search()
                    })
            },
            handle_app_manage_dialog_close() {
                this.app_manage_dialog_visible = false;
            },
            handle_app_dialog_confirm() {
                this.app_manage_modify(this.app_manage_entity)
                this.app_manage_dialog_visible = false;
            },
            app_manage_dialog(data) {
                this.app_manage_entity = data
                this.app_manage_dialog_visible = true;
            },
            app_manage_add() {
                this.app_manage_entity = {
                    id: "",
                    app_name: "",
                    vip_type: "",
                    vip_cycle: "",
                    vip_share_total: ""
                };
                this.app_manage_dialog_visible = true;
            },
            app_manage_modify(data) {
                axios.post('/app_manage/', data,
                    {headers: {'Authorization': `Bearer ${this.token}`}}
                ).then(res => {
                    this.$message({
                        type:'warning',
                        message: res.data.msg
                    })
                    this.app_manage_search()
                })

            },
            handle_open_dialog(row) {
                this.exchange_vip_param.has_vip = row.has_vip
                this.exchange_vip_param.batch_data = [row]
                this.dialogVisible = true;
            },
            handle_batch_open_dialog(row) {
                this.exchange_vip_param.has_vip = row.has_vip
                this.dialogVisible = true;
                this.exchange_vip_param.batch_data = this.multipleSelection
            },
            handle_dialog_close() {
                this.exchange_vip_param = {
                    country_code: "",
                    phone_num: "",
                    phone_code_url: "",
                    app_type: "",
                    vip_type: "",
                    vip_cycle: "",
                    batch_data: "",
                    data_type: ""
                }
                this.dialogVisible = false;
            },
            handle_batch_dialog_close() {
                this.exchange_vip_param = {
                    country_code: "",
                    phone_num: "",
                    phone_code_url: "",
                    app_type: "",
                    vip_type: "",
                    vip_cycle: "",
                    batch_data: "",
                    data_type: ""
                }
                this.dialogVisible = false;
            },
            handle_dialog_confirm() {
                if (this.exchange_vip_param.has_vip === 1) {
                    this.dialogVisible = false;
                    this.$message({
                        type:'warning',
                        message: '已开通会员'
                    })
                    return;
                }
                    axios.post('/phone/batch_exchange_vip', this.exchange_vip_param,
                        {withCredentials: true}, {headers: {'Authorization': `Bearer ${this.token}`}})
                    .then((res) => {
                        this.dialogVisible = false;
                        this.$message({
                            type:'warning',
                            message: res.data.msg
                        })
                        this.phone_num_manage_search()
                  })
            },
            handle_batch_dialog_confirm() {
                this.exchange_vip_param.batch_data = this.exchange_vip_param
            },
            phone_table_size_change(val) {
                this.phone_table_config.page_size = val
                this.phone_num_manage_search()
            },
            phone_table_current_change(val) {
                this.phone_table_config.page_num = val;
                this.phone_num_manage_search()
            },
            app_vip_table_size_change(val) {
                this.phone_table_config.page_size = val
                this.app_vip_manage_search()
            },
            app_vip_table_current_change(val) {
                this.phone_table_config.page_num = val;
                this.app_vip_manage_search()
            },
            shop_vip_table_size_change(val) {
                this.phone_table_config.page_size = val
                this.shop_vip_manage_search()
            },
            shop_vip_table_current_change(val) {
                this.phone_table_config.page_num = val;
                this.shop_vip_manage_search()
            },
            app_table_size_change(val) {
                this.phone_table_config.page_size = val
                this.app_manage_search()
            },
            app_table_current_change(val) {
                this.phone_table_config.page_num = val;
                this.app_manage_search()
            },
            redeem_table_size_change(val) {
                this.phone_table_config.page_size = val
                this.redeem_code_manage_search()
            },
            redeem_table_current_change(val) {
                this.phone_table_config.page_num = val;
                this.redeem_code_manage_search()
            },
            phone_num_manage_search() {
                this.activeTab = 'phone_num_manage'
                axios.post('/phone/search', {
                    phone_num: this.phone_num_manage_param.phone_num,
                    carrier: this.phone_num_manage_param.carrier,
                    has_vip: this.phone_num_manage_param.phone_has_vip,
                    page_size: this.phone_table_config.page_size,
                    page_num: this.phone_table_config.page_num
                }, {withCredentials: true}, {headers: {'Authorization': `Bearer ${this.token}`}})
                    .then(response => {
                        this.phones = response.data.list
                        this.phone_table_config.total = response.data.total
                    })
                    .catch(error => {
                        this.$message.error(error.response?.data?.message || '查询失败');
                        this.loading = false;
                    });
            },
            go_app_vip(phone_num) {
                this.activeTab = 'app_vip_manage';
                this.app_vip_manage_param.phone_num = phone_num;
                this.active_index = '2';
                this.app_vip_manage_search()
            },
            app_vip_manage_search() {
                this.activeTab = 'app_vip_manage'
                axios.post('/app_vip/search', {
                    phone_num: this.app_vip_manage_param.phone_num,
                    app_type: this.app_vip_manage_param.app_type,
                    vip_type: this.app_vip_manage_param.vip_type,
                    page_size: this.phone_table_config.page_size,
                    page_num: this.phone_table_config.page_num
                }, {withCredentials: true}, {headers: {'Authorization': `Bearer ${this.token}`}})
                    .then(response => {
                        this.phones = response.data.list
                        this.phone_table_config.total = response.data.total
                    })
                    .catch(error => {
                        this.$message.error(error.response?.data?.message || '查询失败');
                        this.loading = false;
                    });
            },
            get_url(params) {
                if (params.vip_share_remain === 0) {
                    this.$message({
                          message: '超过分享限制，无法再生成',
                          type: 'warning'
                        });
                    return
                }
                axios.post('/app_vip/url', {
                    country_code: params.country_code,
                    phone_num: params.phone_num,
                    app_type: params.app_type
                }, {withCredentials: true}, {headers: {'Authorization': `Bearer ${this.token}`}})
                    .then(response => {
                        this.$message({
                          message: response.data.msg,
                          type: 'warning'
                        });
                        this.app_vip_manage_search()
                    })
            },
            del_url(params) {
                axios.post('/shop_vip/del_url', {
                    code: params.url_addr,
                }, {withCredentials: true}, {headers: {'Authorization': `Bearer ${this.token}`}})
                    .then(response => {
                        this.$message({
                          message: response.data.msg,
                          type: 'warning'
                        });
                        this.shop_vip_manage_search()
                    })
            },
            invalid_url(params) {
                if (params.url_valid === 0) {
                    this.$message({
                      message: '链接已失效',
                      type: 'warning'
                    });
                    return;
                }
                axios.post('/shop_vip/invalid_url', {
                    code: params.url_addr,
                }, {withCredentials: true}, {headers: {'Authorization': `Bearer ${this.token}`}})
                    .then(response => {
                        this.$message({
                          message: response.data.msg,
                          type: 'warning'
                        });
                        this.shop_vip_manage_search()
                    })
            },
            app_manage_search() {
                this.activeTab = 'app_manage'
                axios.post('/app_manage/search', {
                    page_size: this.phone_table_config.page_size,
                    page_num: this.phone_table_config.page_num
                }, {withCredentials: true}, {headers: {'Authorization': `Bearer ${this.token}`}})
                    .then(response => {
                        this.phones = response.data.list
                        this.phone_table_config.total = response.data.total
                    })
                    .catch(error => {
                        this.$message.error(error.response?.data?.message || '查询失败');
                        this.loading = false;
                    });
            },
            redeem_code_manage_search() {
                this.activeTab = 'redeem_code_manage'
                axios.post('/redeem_code/search', {
                    page_size: this.phone_table_config.page_size,
                    page_num: this.phone_table_config.page_num
                }, {withCredentials: true}, {headers: {'Authorization': `Bearer ${this.token}`}})
                    .then(response => {
                        this.phones = response.data.list
                        this.phone_table_config.total = response.data.total
                    })
                    .catch(error => {
                        this.$message.error(error.response?.data?.message || '查询失败');
                        this.loading = false;
                    });
            },
            phone_template_download() {
                axios.post('/phone/download', {}, {responseType: 'blob'}, {headers: {'Authorization': `Bearer ${this.token}`}}
                ).then((res) => {
                    // 处理响应数据
                    try {
                        // 创建 Blob 对象
                        let blob = new Blob([res.data], {type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;charset=utf-8'});
                        // 从响应头中获取文件名
                        let fileName = res.headers['content-disposition'].split(';')[2].split('=')[1];
                        fileName = decodeURIComponent(fileName.replace("UTF-8''", ''))
                        const link = document.createElement('a');
                        link.download = fileName
                        link.style.display = 'none';
                        link.href = URL.createObjectURL(blob);
                        document.body.appendChild(link);
                        link.click();
                        URL.revokeObjectURL(link.href); // 销毁 URL 对象
                        document.body.removeChild(link);
                    } catch (e) {
                    }
                }).catch((err) => {
                });
            },
            batch_exchange() {
            },
            phone_upload(params) {
                //上传文件的需要formdata类型;所以要转
                let form = new FormData()
                form.append('file', params.file);
                axios.post(
                    '/phone/upload',  // base为axios中baseUrl
                    form, // post请求，参数是放在data中传递的
                    {headers: {'Content-Type': 'multipart/form-data'}}
                ).then((res)=>{
                    this.$message({
                      message: res.data.msg,
                      type: 'warning'
                    });
                    this.phone_num_manage_search()
                });
            },
            redeem_template_download() {
              axios.post('/redeem_code/download', {}, {responseType: 'blob'}, {headers: {'Authorization': `Bearer ${this.token}`}}
                ).then((res) => {
                    // 处理响应数据
                    try {
                        // 创建 Blob 对象
                        let blob = new Blob([res.data], {type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;charset=utf-8'});
                        // 从响应头中获取文件名
                        let fileName = res.headers['content-disposition'].split(';')[2].split('=')[1];
                        fileName = decodeURIComponent(fileName.replace("UTF-8''", ''))
                        const link = document.createElement('a');
                        link.download = fileName
                        link.style.display = 'none';
                        link.href = URL.createObjectURL(blob);
                        document.body.appendChild(link);
                        link.click();
                        URL.revokeObjectURL(link.href); // 销毁 URL 对象
                        document.body.removeChild(link);
                    } catch (e) {
                    }
                }).catch((err) => {
                });
            },
            redeem_code_upload(params) {
                //上传文件的需要formdata类型;所以要转
                let form = new FormData()
                form.append('file', params.file);
                axios.post(
                    '/redeem_code/upload',  // base为axios中baseUrl
                    form, // post请求，参数是放在data中传递的
                    {headers: {'Content-Type': 'multipart/form-data'}} // 注意设置header
                ).then((res)=>{
                    this.$message({
                      message: res.data.msg,
                      type: 'warning'
                    });
                    this.redeem_code_manage_search()
                });
            },

            shop_vip_manage_search() {
                this.activeTab = 'shop_vip_manage'
                axios.post('/shop_vip/search', {
                    page_size: this.phone_table_config.page_size,
                    page_num: this.phone_table_config.page_num
                }, {withCredentials: true}, {headers: {'Authorization': `Bearer ${this.token}`}})
                    .then(response => {
                        console.log(response)
                        this.phones = response.data.list
                        this.phone_table_config.total = response.data.total
                    })
                    .catch(error => {
                        this.$message.error(error.response?.data?.message || '查询失败');
                        this.loading = false;
                    });
            },
            shop_vip_export() {
                axios.post('/shop_vip/export', {
                        page_size: this.phone_table_config.page_size,
                        page_num: this.phone_table_config.page_num
                    }, {responseType: 'blob'}, {headers: {'Authorization': `Bearer ${this.token}`}}
                ).then((res) => {
                    // 处理响应数据
                    try {
                        // 创建 Blob 对象
                        let blob = new Blob([res.data], {type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;charset=utf-8'});
                        // 从响应头中获取文件名
                        let fileName = res.headers['content-disposition'].split(';')[2].split('=')[1];
                        fileName = decodeURIComponent(fileName.replace("UTF-8''", ''))
                        const link = document.createElement('a');
                        link.download = fileName
                        link.style.display = 'none';
                        link.href = URL.createObjectURL(blob);
                        document.body.appendChild(link);
                        link.click();
                        URL.revokeObjectURL(link.href); // 销毁 URL 对象
                        document.body.removeChild(link);
                    } catch (e) {
                    }
                }).catch((err) => {
                });
            },
            toggleSelection(rows) {
                if (rows) {
                    rows.forEach(row => {
                        this.$refs.multipleTable.toggleRowSelection(row);
                    });
                } else {
                    this.$refs.multipleTable.clearSelection();
                }
            },
            handleSelectionChange(val) {
                this.multipleSelection = val;
            },

            loadUsers() {
                this.activeTab = 'users'
                axios.get('/admin/users', {
                    headers: {
                        'Authorization': `Bearer ${this.token}`
                    }
                })
                    .then(response => {
                        this.users = response.data.users;
                    })
                    .catch(error => {
                        this.$message.error('加载用户失败');
                    });
            },

            fetchUserInfo() {
                return new Promise((resolve, reject) => {
                    axios.get('/user', {
                        headers: {
                            'Authorization': `Bearer ${this.token}`
                        }
                    })
                        .then(response => {
                            if (!response.data || !response.data.username) {
                                throw new Error('无效的用户信息');
                            }
                            this.username = response.data.username;
                            resolve();
                        })
                        .catch(error => {
                            this.$message.error('获取用户信息失败');
                            reject(error);
                        });
                });
            },

            logout() {
                // 清除本地存储
                localStorage.removeItem('token');

                // 清除cookie
                document.cookie = 'token=; Path=/; Expires=Thu, 01 Jan 1970 00:00:01 GMT;';

                // 重置状态
                this.token = '';
                this.username = '';

                // 跳转到登录页
                this.$message.success('已登出');
                window.location.href = '/login';
            }
        }
    });
</script>
</body>
</html>